import Page from "@/components/Page";
import { defineComponent, ref } from "vue";
import style from "./index.module.less";
import CardView from "@/components/CardView";
import IconText from "@/components/IconText";
import gfsjIcon from "./asserts/gfsj-icon.png";
import wdzyIcon from "./asserts/wdzy-icon.png";
import yjfkIcon from "./asserts/yjfk-icon.png";
import bzzxIcon from "./asserts/bzzx-icon.png";
import bgIcon from "./asserts/bg-icon.png";
import yesIcon from "./asserts/yes-icon.png";
import pIcon from "./asserts/person-icon.png";
import controlIcon from "./asserts/control-icon.png";
import RoundInfo from "@/components/RoundInfo";
import { useRouter } from "vue-router";
import { useDetail } from "@/hooks";

export default defineComponent({
  setup(props, {}) {
    const router = useRouter();
    const [userInfo] = useDetail("/api/h5/farmer/userInfo", {
      entityName: "",
      phone: "",
      logo: "",
    });
    const data2 = [
      {
        text: "共富数据",
        icon: gfsjIcon,
        url: "/eachRichData",
      },
      {
        text: "我的主页",
        icon: wdzyIcon,
        url: "/myHomePage",
      },
      {
        text: "意见反馈",
        icon: yjfkIcon,
        url: "/feedBack",
      },
      {
        text: "帮助中心",
        icon: bzzxIcon,
        url: "/helpCenter",
      },
    ];
    const renderUser = () => {
      return (
        <div
          class={["flex justify-between px-17"]}
          onClick={() => router.push("/userInfo")}
        >
          <div>
            <RoundInfo
              src={userInfo.value.logo}
              title={userInfo.value.entityName}
              text={userInfo.value.phone}
              class={["mt-20"]}
            />
            {/* <div
              class={
                "bg-white w-[139px] rounded-b-3xl pl-10 mt-15 flex items-center"
              }
              style={{ borderRadius: "50px" }}
            >
              <span>lv1</span>
              <div
                class={"w-[79px] h-3 inline-block bg-blues ml-5"}
                style={{ borderRadius: "50px" }}
              >
                <div
                  class={`w-[${"20"}px] h-3`}
                  style={{
                    borderRadius: "50px",
                    backgroundColor: "rgba(95, 181, 251, 1)",
                  }}
                ></div>
              </div>
            </div> */}
          </div>
          <img
            src={pIcon}
            alt=""
            width="83px"
            class={["w-[83px] mt-5 mr-12"]}
          />
        </div>
      );
    };
    const renderjf = () => {
      const dateArray = ref([
        {
          date: "1",
          type: true,
        },
        {
          date: "2",
          type: true,
        },
        {
          date: "3",
          type: true,
        },
        {
          date: "4",
          type: true,
        },
        {
          date: "5",
          type: true,
        },
        {
          date: "6",
          type: false,
        },
        {
          date: "7",
          type: false,
        },
      ]);
      const title = () => {
        return (
          <div class="text-[#333333] flex items-center">
            <span>已经连续签到</span>
            <span class="text-[#FE8923]">5</span>
            <span>天</span>
          </div>
        );
      };
      return (
        <CardView title={title() as any} right={() => <div>查看积分</div>}>
          <div class={"flex justify-between mb-10"}>
            {dateArray.value.map((e, i) => {
              return (
                <div class={"items-center"}>
                  <div
                    class={"w-[42px] h-[56px] flex justify-center items-center"}
                    style={{
                      border: "solid 1px rgba(248, 218, 168, 1)",
                      borderRadius: "2px",
                      backgroundColor: e.type ? "" : "rgba(250, 245, 239, 1)",
                    }}
                  >
                    {e.type ? (
                      <img src={yesIcon} alt="" class={"h-[27px]"} />
                    ) : (
                      <div
                        class={
                          "h-[27px] w-[27px] flex justify-center items-center"
                        }
                        style={{
                          backgroundColor: "rgba(248, 218, 168, 1)",
                          border: "solid 1px #F8DAA",
                          borderRadius: "100%",
                        }}
                      >
                        <span
                          style={{
                            color: "rgba(243, 98, 33, 1)",
                            fontSize: "11px",
                          }}
                        >
                          +30
                        </span>
                      </div>
                    )}
                  </div>
                  <div class={"w-full flex justify-center"}>{e.date}天</div>
                </div>
              );
            })}
          </div>
        </CardView>
      );
    };
    const rendericon = () => {
      return (
        <CardView class={"!h-[101px]"}>
          <div class={"horizontal flex justify-around mt-10"}>
            {data2.map((e) => {
              return (
                <IconText
                  class={"icon-text-col"}
                  text={e.text}
                  url={e.icon}
                  iconSize={44}
                  onClick={() => router.push(e.url)}
                />
              );
            })}
          </div>
        </CardView>
      );
    };
    const renderSetting = () => {
      return (
        <CardView class={"!h-[55px] flex justify-center"}>
          <IconText
            url={controlIcon}
            class="message"
            text={"设置"}
            onClick={() => router.push("/userInfo")}
          />
        </CardView>
      );
    };
    const render2 = () => {
      return (
        <CardView style={{ background: `url(${bgIcon}) no-repeat` }}>
          {renderUser()}
          {/* {renderjf()} */}
          {rendericon()}
          {renderSetting()}
        </CardView>
      );
    };

    return () => {
      return (
        <Page padding={0} class={["overflow-y-auto"]}>
          <div class={[style["index"]]}>{render2()}</div>
        </Page>
      );
    };
  },
});
